/*
 * @Author: wwssaabb
 * @Date: 2021-01-21 08:50:29
 * @LastEditTime: 2021-02-23 08:58:17
 * @FilePath: \sass_demo\Visual staggered\sass\style.scss
 */

@import "base";

@mixin round-info($round-bgc,$diff-count) {
  position: relative;
  width: $start-radius*2;
  height: $start-radius*2;
  border-radius: 50%;
  background-color:$round-bgc;
  
  &::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background-color: $round-bgc;
    -webkit-animation: grow 1.5s ease-in infinite ;
    animation: grow 1.5s ease-in infinite ;
    animation-delay:$diff-count*$diff-time;
  }
}

.wrap{
  @include flex-row-se_c;
  width: 35vw;
  height: auto;
  padding: 5.33049vh 1.30208vw;
  border-radius:2vw;
  background-color:#222222;

  @for $i from 0 to 5 {
    .round#{$i+1}{
      @include round-info(nth($round1-bgc-list,$i+1),$i)
    }
  }
}

@-webkit-keyframes grow{
  0%{scale: 1;opacity: 1;}
  50%{scale: 1.8;opacity: 0.4;}
  100%{scale: 2;opacity: 0;}
}
@keyframes grow{
  0%{scale: 1;opacity: 1;}
  50%{scale: 1.8;opacity: 0.4;}
  100%{scale: 2;opacity: 0;}
}

